<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>my title2</title>

    <style>
        .test {
            color: #000;
        }
        
        .test2 {
            color: red;
            background-color: blue;
        }
        
    </style>
</head>
<body>

    <i>test i</i>

    <div id="myDiv" class="test">
        <b>test div2</b>
        <i>test div1</i>
        <i id="ti">test div2</i>
    </div>

    <!--<input id="btn1" type="button" value="按钮1">

    <button onclick="showAlert()">按钮2</button>

    <ul>
        <li>item1</li>
        <li>item2</li>
        <li class="test">item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>

    <form action="">

        <input type="text" name="username">

        <input id="man" type="radio" name="gender" value="男">
        <label for="man">男</label>

        <label>
            <input class="test" id="woman" type="radio" name="gender" value="女"> 女
        </label>

    </form>

    <span id="mySpan">my span</span>

    <p class="test">ppppppppp</p>-->

    <script>

        /*var myDiv = document.getElementById('myDiv');
        var ti = document.getElementById('ti');

        var span = document.createElement('span');
        var txt = document.createTextNode('my span');

        span.appendChild(txt);

        myDiv.replaceChild(span, ti);*/

        // myDiv.insertBefore(span, myDiv.getElementsByTagName('b')[0]);

        // var myDiv = document.getElementById("myDiv");

        // var i = myDiv.getElementsByTagName('i')[0];
//        var i = document.getElementById('ti');
//        i.parentNode.removeChild(i);

        // console.log(i.parentNode);

        // myDiv.removeChild(i);

//        var myDiv = document.getElementById("myDiv");
//        var span = document.createElement("span");
//        var txt = document.createTextNode("my span");
//
//        span.appendChild(txt);
//
//        // myDiv.appendChild(span);
//
//        // var body = document.getElementsByTagName("body")[0];
//        var body = document.body;
//        var head = document.head;
//        var title = document.title; // var title = "my title";
//
//        // document.title = "Hello WBC";
//        title = "Hello WBC";

        // console.log(title);

        // body.appendChild(span);



//        var btn1 = document.getElementById('btn1');
//
//        btn1.onclick = showAlert;
//        // btn1.onclick = showAlert();
//        // btn1.onclick = undefined;
//
//        function showAlert() {
//            alert(99999999999);
//        }
//
//        /*btn1.onclick = function() {
//            alert('我被点击了。。。');
//        };*/
//
//        var myDiv = document.getElementById('myDiv');
//
//        // myDiv.style.color = "red";
//
//       var lis = document.getElementsByTagName('li');
//
//        /*for (var i=0; i<lis.length; i++) {
//            if (i == 2) {
//                continue;
//            }
//            lis[i].style.color = "red";
//        }*/
//
//
//        var radios = document.getElementsByName("gender");

        // console.log(radios);

        // lis[0].style.color = "red";

        // lis.style.color = "red";

        // console.log(lis);

        // myDiv.innerHTML = "<h1>Welcome to WBC</h1>";

        // console.log(myDiv); // DOM 对象


        // document
        var dom = {
            getElementById: function(id) {
                // return domObj;
            },
            html: {
                head: {
                    meta: {},
                    title: {
                        innerText: "my title"
                    }
                },
                body: {
                    div: {
                        attr: {
                            className: "test"
                        },
                        innerText: "test div2"
                    },
                    ul: {},
                    span: {},
                    p: {}
                }
            }
        };
    </script>

</body>
</html>